<template>
  <cyyModal :visible="visible" :title="title" :modalWidth="700" @handleCancel="handleCancel" @handleOk="handleOk">
    <div class="select-content">
      <a-input-search placeholder="手机号/微信昵称/姓名" v-model="searchVal" @search="onSearch" />
      <a-table
        ref="tableList"
        @mouseleave.native="onMouseLeaveTable"
        :columns="columns"
        :data-source="dataSource"
        :rowSelection="{ type: selectType, selectedRowKeys: this.selectedRowKeys, onChange: this.onSelectChange }"
        :row-key="(record) => record.id"
        :pagination="{
          total: this.totalCount,
          showSizeChanger: false,
          onChange: this.tablePageChange,
        }"
        :loading="loading"
        :customRow="
          (record, index) => {
            return {
              on: {
                mouseenter: (e) => {
                  this.currentRowId = record.id
                },
              },
            }
          }
        "
      >
        <!-- 用户信息 -->
        <template slot="name" slot-scope="text, scope">
          <div class="user-info">
            <img class="user-avatar" :src="scope.avatar" alt="" />
            <span class="user-name">{{ scope.name }}</span>
          </div>
        </template>
        <!-- 手机号 -->
        <template slot="mobile" slot-scope="text, scope">
          <span class="user-name">{{ scope.mobile || '-' }}</span>
        </template>
      </a-table>
    </div>
  </cyyModal>
</template>

<script>
import cyyModal from '../Modal/index.vue'
import storage from 'store'
import { getSelectUserList } from '@/api/user'

export default {
  components: {
    cyyModal,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '选择用户',
    },
    selectType: {
      type: String,
      default: 'checkbox', // radio
    },
  },
  data() {
    return {
      searchVal: '',
      columns: [
        {
          title: 'ID',
          dataIndex: 'id',
          key: 'id',
        },
        {
          title: '用户信息',
          dataIndex: 'name',
          key: 'name',
          scopedSlots: { customRender: 'name' },
        },
        {
          title: '手机号',
          dataIndex: 'mobile',
          key: 'mobile',
          scopedSlots: { customRender: 'mobile' },
        },
      ],
      dataSource: [],
      totalCount: 0,
      pageSize: 4,
      pageNo: 1,
      loading: false,
      currentRowId: '',
      selectedRowKeys: [],
    }
  },
  created() {},
  computed: {},
  mounted() {
    this.getListData({ type: 'user' })
  },
  methods: {
    // 获取用户列表数据
    getListData(params) {
      let reqPrams = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        store_id: storage.get('storeId') || 1,
        keyword: this.searchVal,
        ...params,
      }
      getSelectUserList(reqPrams).then((res) => {
        console.log('用户数据', res)
        if (!res.code) {
          this.dataSource = res.data.data
          this.totalCount = res.data.totalCount
        }
      })
    },
    // 点击搜索
    onSearch() {
      console.log(this.searchVal)
      this.pageNo = 1
      this.getListData()
    },
    // 点击确认按钮
    handleOk() {
      if (!this.selectedRowKeys.length) return
      // 如果是单选，则返回data = val；如果是多选，则返回选择的数组
      if (this.selectType == 'radio') {
        this.$emit('handleOk', { data: this.selectedRowKeys[0] })
        return
      }
      this.$emit('handleOk', { data: this.selectedRowKeys })
    },
    // 点击取消按钮
    handleCancel() {
      this.$emit('handleCancel')
    },
    onMouseLeaveTable(e) {
      if (e.relatedTarget && e.relatedTarget.className.indexOf('popover') != -1) {
        return
      }
      this.currentRowId = ''
    },
    // 分页请求
    tablePageChange(e) {
      this.pageNo = e
      this.getListData()
    },
    // 表格选中
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },
  },
}
</script>
<style lang="less" scoped>
.select-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  /deep/.ant-table-wrapper {
    width: 100%;
    margin-top: 24px;
  }
  .user-info {
    display: flex;
    align-items: center;
    .user-avatar {
      width: 48px;
      height: 48px;
      background: #597ef7;
      border-radius: 4px;
    }
    .user-name {
      margin-left: 24px;
      font-size: 14px;
      font-family: PingFangSC-Medium;
      line-height: 22px;
      color: rgba(0, 0, 0, 0.65);
    }
  }
}
</style>
